<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
import { departmentListApi } from '@/apis/consult'
import type { DepartData } from '@/types/consult'
import { ref,computed } from 'vue'

// 0. 获取 url 传递的参数
const props = defineProps<{ type: string; illnessType: string }>()
// console.log(props)

// 1. 获取 科室信息
const departmentList = ref([] as DepartData[])
const getDepartments = async () => {
  const res = await departmentListApi()
  // console.log(res)
  departmentList.value = res
}
getDepartments()

// 2. 高亮切换
// 状态变量（索引），点击切换，切换类名 active
const activeIndex = ref(0)

//3,获取右侧列表
const renderList= computed(()=>{
  // 最开始的时候 数组 为空 点不出来
  // ?可选链 保证一定可以获取到
  return departmentList.value[activeIndex.value]?.child
})

//4,携带id跳转到问诊界面
//要使用反引号，不然得不到实付金额。
const url = `/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&depId=`
</script>

<template>
  <view class="department-page">
    <!-- scroll-view 滚动 -->
    <scroll-view scroll-y class="department-primary">
      <!-- 列表项 -->
      <view v-for="(item, index) in departmentList" :key="item.id" class="department-item" @click="activeIndex = index" 
      :class="{ active: index == activeIndex }">{{ item.name }}</view>
    </scroll-view>
    <scroll-view class="department-secondary">
       <!-- 数组+索引获取当前项的子节点 child 然后渲染
         departmentList[activeIndex].child可以直接写行内，如果要简化可以通过计算属性，简化取值
      -->
      <navigator v-for="(item,index) in renderList" :key="item.id" hover-class="none" 
      :url="url+item.id" class="department-item">{{item.name}} </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
